<template lang="html">
  <div>
    <div v-transfer-dom>
      <popup v-model="LoginShow" height="100%" @on-hide="hide">
        <div class="popup1">
          <div class="banner-box">
            <img src="../../assets/banner.png" width="100%" class="banner"></img>
          </div>
          <div class="select">
            <button-tab v-model="LoOrRe">
              <button-tab-item selected @on-item-click="loginItem">登陆</button-tab-item>
              <button-tab-item>注册</button-tab-item>
            </button-tab>
          </div>
          <!--登陆开始-->
          <div v-if="LoOrRe===0" class="form-box">
            <group class="input-defalut">
              <x-input placeholder="输入手机号"  type="tel" is-type="china-mobile" v-model="loginUser.cellphone" ref="phoneLo" required :max="11" :min="11" @on-change="onChangeLo" >
                <img src="../../assets/mobile.png" alt="" slot="label" class="input-icon phone">
              </x-input>
            </group>
            <group class="input-defalut">
              <x-input placeholder="输入密码" required type="password" v-model="loginUser.password" :is-type="passwordValid" ref="passwordLo" :min="6" @on-change="onChangeLo">
                <img src="../../assets/password.png" alt="" slot="label" class="input-icon password">
              </x-input>
            </group>
            <div class="login-button btn-box">
              <x-button class="btn" @click.native="login" :disabled="(!phoneLoValid||!passwordLoValid)">登录</x-button>
            </div>
            <p class="forget"><span @click="toFoget">忘记登录密码？</span></p>
          </div>
          <!--登陆结束-->
          <!--注册开始-->
          <div v-else class="form-box">
            <div class="choose" v-if="registerNext">
              <x-button @click.native="toPersonal" class="btn personal-btn"><img src="../../assets/personal-center.png" class="choose-icon">我是个人用户</x-button>
              <x-button @click.native="toCompany" class="btn company-btn"><img src="../../assets/qi.png" class="choose-icon">我是企业用户</x-button>
            </div>
            <!--个人注册开始-->
            <div v-else>
              <div v-if="personalRe">
                <group class="input-defalut">
                  <x-input placeholder="输入手机号" v-model="selfRe.cellphone" type="tel" name="mobile" keyboard="number" is-type="china-mobile" :max="11" :min="11" required ref="phoneSelfRe" @on-change="onChangeSelfRe">
                    <img src="../../assets/mobile.png" alt="" slot="label" class="input-icon phone">
                  </x-input>
                </group>
                <group class="input-defalut">
                  <x-input placeholder="输入密码" v-model="selfRe.password" required type="password" :it-type="passwordValid" ref="passwordSelfRe" :min="6" @on-change="onChangeSelfRe">
                    <img src="../../assets/password.png" alt="" slot="label" class="input-icon password">
                  </x-input>
                </group>
                <group class="input-defalut">
                  <x-input placeholder="输入姓名" v-model="selfRe.realname" :min="2" :max="6" type="text" is-type="china-name" required ref="nameSelfRe" @on-change="onChangeSelfRe">
                    <img src="../../assets/bussiness-man.png" alt="" slot="label" class="input-icon name">
                  </x-input>
                </group>
                <group class="input-defalut">
                  <x-input placeholder="输入证件号码" v-model="selfRe.id_number" type="text" required ref="idSelfRe" @on-change="onChangeSelfRe">
                    <img src="../../assets/bussiness-card.png" alt="" slot="label" class="input-icon card">
                  </x-input>
                </group>
                <group class="input-defalut">
                  <x-input placeholder="输入验证码" v-model="selfRe.code" class="weui-vcode" type="number" required ref="identifySelfRe" :min="6" @on-change="onChangeSelfRe">
                    <img src="../../assets/email.png" alt="" slot="label" class="input-icon code">
                    <countdown slot="right" @click.native="send" ref="countBtn" :disabled="disabled" :cellphone="selfRe.cellphone"></countdown>
                  </x-input>
                </group>
                <div class="checkbox">
                  <input type="checkbox" v-model="checked">
                  <label>我已阅读并同意<span class="agreement" v-on:click="agreement">《集利财富网服务协议》</span></label>
                </div>
                <div class="checkbox">
                  <input type="checkbox" v-model="checked2">
                  <label>我已阅读并同意<span class="agreement" v-on:click="digital">《数字证书服务协议》</span></label>
                </div>
                <div class="next-button btn-box">
                  <x-button @click.native="registerSelf" class="btn" :disabled="!phoneSelfReValid||!passwordSelfReValid||!nameSelfReValid||!idSelfReValid||!identifySelfReValid||!checked||!checked2">下一步</x-button>
                </div>
              </div>
              <!--个人注册结束-->
              <!--企业注册开始-->
              <div v-else>
                <group class="input-defalut">
                  <x-input placeholder="输入手机号" type="tel" v-model="companyRe.cellphone" name="mobile" keyboard="number" is-type="china-mobile" :max="11" :min="11" required ref="phoneComRe" @on-change="onChangeComRe">
                    <img src="../../assets/mobile.png" alt="" slot="label" class="input-icon phone">
                  </x-input>
                </group>
                <group class="input-defalut">
                  <x-input placeholder="输入密码" required type="password" v-model="companyRe.password" ref="passwordComRe" :min="6" @on-change="onChangeComRe" :is-type="passwordValid">
                    <img src="../../assets/password.png" alt="" slot="label" class="input-icon password">
                  </x-input>
                </group>
                <group class="input-defalut">
                  <x-input placeholder="企业名称" type="text" v-model="companyRe.name" required ref="nameComRe" @on-change="onChangeComRe">
                    <img src="../../assets/store.png" alt="" slot="label" class="input-icon store">
                  </x-input>
                </group>
                <group class="input-defalut">
                  <x-input placeholder="组织机构代码证或统一信息社会代码" v-model="companyRe.organizationCode" type="text" required ref="idComRe" @on-change="onChangeComRe">
                    <img src="../../assets/survey.png" alt="" slot="label" class="input-icon survey">
                  </x-input>
                </group>
                <group class="input-defalut">
                  <x-input placeholder="输入验证码" v-model="companyRe.code" class="weui-vcode" type="number" required ref="identifyComRe" :min="6" @on-change="onChangeComRe">
                    <img src="../../assets/email.png" alt="" slot="label" class="input-icon code">
                    <countdown slot="right" @click.native="send" ref="countBtn" :disabled="disabled" :cellphone="companyRe.cellphone"></countdown>
                  </x-input>
                </group>
                <group class="input-defalut">
                  <selector :options="typesLists" v-model="companyRe.types" placeholder="请选择企业类型">
                  </selector>
                </group>
                <div class="checkbox">
                  <input type="checkbox" v-model="checked">
                  <label>我已阅读并同意<span class="agreement" v-on:click="agreement">《集利财富签约宝网站注册用户服务协议》</span></label>
                </div>
                <div class="checkbox">
                  <input type="checkbox" v-model="checked2">
                  <label>我已阅读并同意<span class="agreement" v-on:click="digital">《数字证书服务协议》</span></label>
                </div>
                <div class="next-button btn-box">
                  <x-button @click.native="registerCom" class="btn" :disabled="!phoneComReValid||!passwordComReValid||!nameComReValid||!idComReValid||!identifyComReValid||!checked||!checked2">下一步</x-button>
                </div>
              </div>
              <!--企业注册结束-->
            </div>
          </div>
          <!--注册结束-->
          <div v-transfer-dom>
            <x-dialog v-model="showScrollBox" class="dialog">
              <div @click="showScrollBox=false" class="dialog-close">
                <span class="vux-close"></span>
              </div>
              <p class="dialog-content">
                <agreement></agreement>
              </p>
            </x-dialog>
          </div>
          <div v-transfer-dom>
            <x-dialog v-model="digitalBox" class="dialog">
              <div @click="digitalBox=false" class="dialog-close">
                <span class="vux-close"></span>
              </div>
              <p class="dialog-content">
                <digital></digital>
              </p>
            </x-dialog>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import { TransferDom, XInput, Group, XButton, Popup, ButtonTab, ButtonTabItem, Cell, Checker, CheckerItem, XDialog, Selector, XImg } from 'vux'
import Countdown from '../Countdown/Countdown.vue'
import Agreement from '../Agreement/Agreement'
import Digital from '../Digital/Digital'
import router from '../../router/index.js'
import { mapGetters, mapMutations } from 'vuex'
import { passwordValid } from '../../utils/validate'
/*
**Re表示注册页面Lo表示登陆页面
*/
export default {
  name: 'Login',
  directives: {
    TransferDom
  },
  data () {
    return {
      LoOrRe: 0,
      disabled: true,
      registerNext: true,
      personalRe: false,
      // 协议已读
      checked: true,
      checked2: true,
      // 协议弹框
      showScrollBox: false,
      digitalBox: false,
      // 登陆验证表单
      phoneLoValid: false,
      passwordLoValid: false,
      // 个人注册验证表单
      phoneSelfReValid: false,
      passwordSelfReValid: false,
      nameSelfReValid: false,
      idSelfReValid: false,
      identifySelfReValid: false,
      // 个人注册输入框数值
      selfRe: {
        cellphone: '',
        password: '',
        realname: '',
        id_number: '',
        code: ''
      },
      // 企业注册输入框数值
      companyRe: {
        cellphone: '',
        password: '',
        name: '',
        organizationCode: '',
        code: '',
        types: ''
      },
      // 登陆输入框数值
      loginUser: {
        cellphone: '',
        password: ''
      },
      // 企业注册验证表单
      phoneComReValid: false,
      passwordComReValid: false,
      nameComReValid: false,
      idComReValid: false,
      identifyComReValid: false,
      typesLists: [{key: 'borrower', value: '贷款方'}, {key: 'guarantor', value: '担保方'}],
      // 密码验证
      passwordValid: passwordValid,
      success: false,
      falid: false
    }
  },
  created () {
    let token = localStorage.token
    if (token) {
      this.setLogin(false)
    }
  },
  computed: {
    ...mapGetters({
      LoginShow: 'getPopup',
      Token: 'getToken'
    })
  },
  methods: {
    // 使注册回到选择状态
    loginItem () {
      this.registerNext = true
    },
    // 登陆验证
    onChangeLo () {
      this.phoneLoValid = this.$refs.phoneLo.valid
      this.passwordLoValid = this.$refs.passwordLo.valid
    },
    // 个人验证
    onChangeSelfRe () {
      this.phoneSelfReValid = this.$refs.phoneSelfRe.valid
      this.passwordSelfReValid = this.$refs.passwordSelfRe.valid
      this.nameSelfReValid = this.$refs.nameSelfRe.valid
      this.idSelfReValid = this.$refs.idSelfRe.valid
      this.identifySelfReValid = this.$refs.identifySelfRe.valid
      // 发送验证码手机检验
      this.disabled = !this.phoneSelfReValid
    },
    // 公司验证
    onChangeComRe () {
      this.phoneComReValid = this.$refs.phoneComRe.valid
      this.passwordComReValid = this.$refs.passwordComRe.valid
      this.nameComReValid = this.$refs.nameComRe.valid
      this.idComReValid = this.$refs.idComRe.valid
      this.identifyComReValid = this.$refs.identifyComRe.valid
      // 发送验证码手机检验
      this.disabled = !this.phoneComReValid
    },
    hide () {
      if (this.$route.path === '/') {
        // 调用main.js的公共函数
        this.getContract()
      }
    },
    // 个人注册
    registerSelf () {
      this.$store.dispatch('registerSelf', this.selfRe).then((res) => {
        let result = res.data
        if (this.Token) {
          this.setToast({
            show: true,
            type: '',
            text: '注册成功'
          })
          this.setLogin(false)
        } else {
          this.setToast({
            show: true,
            type: 'text',
            text: result.Message
          })
        }
      })
    },
    // 企业注册
    registerCom () {
      this.$store.dispatch('registerCom', this.companyRe).then((res) => {
        let result = res.data
        if (result.Code === 301) {
          this.setToast({
            show: true,
            type: '',
            text: '注册成功'
          })
          window.location.href = result.Url
        } else {
          this.setToast({
            show: true,
            type: 'text',
            text: result.Message
          })
        }
      })
    },
    // 登陆
    login () {
      this.$store.dispatch('login', this.loginUser).then((res) => {
        let result = res.data
        if (this.Token) {
          this.setToast({
            show: true,
            type: '',
            text: '成功登录'
          })
          this.setLogin(false)
        } else {
          this.setToast({
            show: true,
            type: 'text',
            text: result.Message
          })
        }
      })
    },
    // 跳转到个人注册
    toPersonal () {
      this.registerNext = false
      this.personalRe = true
    },
    // 跳转到企业注册
    toCompany () {
      this.registerNext = false
      this.personalRe = false
    },
    // 跳转到忘记密码
    toFoget () {
      this.setLogin(false)
      router.push({ path: '/foget' })
    },
    // 协议弹框
    agreement () {
      this.showScrollBox = true
    },
    digital () {
      this.digitalBox = true
    },
    /**
     * [send 使验证码按钮不可用,然后调用接口,最后调用倒计时组件中的初始函数]
     * @return {[type]} [description]
     */
    send () {
      this.disabled = true
      this.$refs.countBtn.run()
      this.disabled = false
    },
    /**
     * [setLoginHidden 使登录页放下 , 传入参数false即放下,true即拉上]
     * @type {boolen}
     */
    ...mapMutations({
      setLogin: 'setPopup',
      setToast: 'setShowToast'
    })
  },
  components: {
    XInput,
    XButton,
    Group,
    Popup,
    ButtonTab,
    ButtonTabItem,
    Countdown,
    Cell,
    Checker,
    CheckerItem,
    XDialog,
    Selector,
    Agreement,
    XImg,
    Digital
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/close.less';
  .popup1 {
    width:100%;
    height:100%;
    overflow: auto;
    background-color: #ffffff;
  }
  .select {
    margin-top:-2px;
    .vux-button-group > a.vux-button-group-current {
      background-color:#ffffff;
      color:#5b5b5b;
    }
    .vux-button-group > a{
      font-size:20px;
      color:#5b5b5b;
      background-color: #f5f5f5;
      height: 50px;
      line-height: 50px;
    }
    .vux-button-group > a.vux-button-tab-item:after{
      border:1px solid #e0e0e0;
      border-right: 0px;
      border-left: 0px;
      border-top:0px;
    }
    .vux-button-group > a.vux-button-tab-item-first{
      border-radius: 0px;
      &:after{
        border-radius: 0px;
      }
    }
    .vux-button-group > a.vux-button-tab-item-last{
      border-radius: 0px;
      &:after{
        border-radius:0px;
      }
    }
  }
  .forget{
    color:#5b5b5b;
    font-size:20px;
    text-align:center;
    padding:10px;
  }
  .choose{
    
    .choose-icon{
      vertical-align: middle;
      margin-right: 15px;
      margin-top: -5px;
      width: 32px;
    }
  }
  .btn.personal-btn,.btn.company-btn {
    height: 4rem;
    border-radius: 15px;
  }
  .weui-btn + .btn.weui-btn {
    margin-top: 2rem;
  }
  .checkbox {
    margin-top:15px;
    input {
      width:16px;
      height:16px;
    }
  }
  .agreement {
    color:#428bca;
  }
  .dialog {
    .dialog-close{
      text-align: right;
      padding: 10px;
      padding-bottom: 0;
    }
   .weui-dialog {
      border-radius: 8px;
      max-width: none;
      width: 95%;
    }
    .dialog-content {
      color:#666;
      height:400px;
      padding:0px 10px;
      text-align:left;
      overflow:scroll;
      -webkit-overflow-scrolling:touch;
    }
  }
  .input-defalut .vux-selector.weui-cell_select-after{
    padding: 5px 10px;
  }
  .weui-cell_select .weui-select{
    color: #757575;
  }
  .banner-box {
    text-align: center;
  }
  .banner {
    max-width: 760px;
  }
</style>
